<template>
  <div style="position: relative; overflow: hidden">
    <!--预览1个-->
    <div>打印条码数：1 </div>
    <div style="text-align: center; margin: 40px auto">
      建议条码纸型：5 * 3 cm
    </div>
    <div>
      <div style="font-size: 14px" v-if="showSubText">
        <div>AABB</div>
        <div class="mt5">采样日期：2023-12-24 15:34:21</div>
      </div>
      <vue-barcode
          :value="printBarcode[0]"
          :height="50"
          :fontSize="17"
          :marginTop="0"
          :width="2"
          :text="`${typeText}${printBarcode[0]}`"
          :textMargin="3"
      ></vue-barcode>
    </div>
    <div style="text-align: center; margin-top: 30px">
      请核对打出的全部条码与预览图片格式相符，确保条码内容完整、清晰！
    </div>
    <!--实际需要打印的-->
    <div id="printBarcode" style="position: absolute; z-index: -1">
      <div v-for="(item, index) in printBarcode" :key="index">
        <div style="font-size: 12px;text-align: center;margin-top: 15px" v-if="showSubText">
          <div>AABB</div>
          <div class="mt5">采样日期：2023-12-24 15:34:21</div>
        </div>
        <vue-barcode
            :value="item"
            :height="50"
            :fontSize="17"
            :width="2"
            :marginTop="showSubText?10:40"
            :text="`${typeText}${item}`"
            :textMargin="3"
        ></vue-barcode>
      </div>
    </div>
    <div style="margin-top: 30px">
      <el-button type="primary" v-print="'#printBarcode'" size="small"
      >打印</el-button
      >
    </div>
  </div>
</template>

<script>
import VueBarcode from "vue-barcode";
export default {
  name: "Barcode",
  components: {
    VueBarcode,
  },
  props: {
    printBarcode: {
      type: Array,
      default: () => {
        return ['10023000371'];
      },
    },
    typeText: {
      type: String,
      default: "样本编号：",
    },
  },
  data() {
    return {
      showSubText: true
    };
  },
  computed: {},
  created() {},
  methods: {},
};
</script>

<style scoped lang="scss"></style>
